<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>11_学子商城页面</title>
        <style>
            /***** 公共CSS *****/
            * {
                margin:0;
                padding:0;
            }
            /*版心 固定宽度且居中*/
            .center {
                width: 1000px;
                margin: 0 auto;
            }
            /***** f1 CSS *****/
            .f1,.f2 {
                overflow: hidden;
            }
            /***** f1 左侧 CSS *****/
            .f1>.left {
                width: 611px;
                height: 376px;
                background-color: #e8e8e8;
                margin-bottom: 10px;
                float:left;
                position: relative;
            }
            .f1>.left>.text {
                width:245px;
                height:232px;
                margin-top:68px;
                margin-left:36px;
            }
            .f1>.left>img {
                width:318px;
                height:319px;
                position:absolute;
                top:35px;
                left:265px;
            }
            .f1>.left>.text>.p_title {
                font-size: 32px;
                color: #333;
                font-weight: lighter;
                margin-bottom: 12px;
            }
            .f1>.left>.text>.p_intro {
                font-size: 12px;
                color: #666;
                font-weight: lighter;
                margin-bottom: 24px;
            }
            .f1>.left>.text>.p_price {
                font-size: 24px;
                font-weight: bold;
                color: #0aa1ed;
                margin-bottom: 12px;
            }
            .f1>.left>.text>a {
                display: block;
                background-color: #0aa1ed;
                width: 132px;
                height:40px;
                border-radius: 5px;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                text-decoration: none;
            }
            /***** f1 右侧 CSS *****/
            .f1>.right {
                width: 375px;
                height: 376px;
                background-color: #e8e8e8;
                margin-left: 10px;
                float:left;
                position:relative;
            }
            .f1>.right>.text {
                width:245px;
                height:232px;
                margin-top:39px;
                margin-left:25px;
            }
            .f1>.right>img {
                width:292px;
                height:232px;
                position:absolute;
                top:130px;
                left:75px;
            }
            .f1>.right>.text>.p_title {
                font-size: 32px;
                color: #333;
                font-weight: lighter;
                margin-bottom: 12px;
            }
            .f1>.right>.text>.p_intro {
                font-size: 12px;
                color: #666;
                font-weight: lighter;
                margin-bottom: 24px;
            }
            .f1>.right>.text>.p_price {
                color: #0aa1ed;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 12px;
            }
            .f1>.right>.text>a {
                display: block;
                background-color: #0aa1ed;
                width: 132px;
                height:40px;
                border-radius: 3px;
                color: #fff;
                font-size: 20px;
                text-align: center;
                line-height: 40px;
                text-decoration: none;
            }
            /***** f2 左侧 CSS *****/
            .f2>.left {
                width: 366px;
                height: 233px;
                background-color: #e8e8e8;
                margin-right: 20px;
                float: left;
            }
            .f2>.left>.tit>.head {
                display:inline-block;
                font-family: "simhei";
                background-color: #0aa1ed;
                width:100%;
                height: 35px;
                position:relative;
            }
            .f2>.left>.tit>.head>img {
                width:29px;
                height:20px;
                position:absolute;
                top:8px;
                left:10px;
            }
            .f2>.left>.tit>.head>span {
                position:absolute;
                color:#fff;
                line-height: 35px;
                left:49px;
            }
            .f2>.left>.tit>.item_all {
                padding-left:12px;
                font-size: 12px;
            }
            .f2>.left>.tit>.item_all>p {
                color:#62b5ec;
                margin-top: 17px;
                margin-bottom: 9px;
            }
            .f2>.left>.tit>.item_all>ul>li {
                color:#0aa1ed;
                margin-right: 10px;
                list-style: none;
                display: inline-block;
            }
            /***** f2 卡片 CSS *****/
            .f2>.card {
                width: 198px;
                height: 233px;
                background-color: #e8e8e8;
                margin-right: 8px;
                float: left;
                font-size: 12px;
                text-align: center;
            }
            .f2>.card>img {
                width:100%;
            }
            .f2>.card>.p_intro {
                font-weight: lighter;
                color: #000;
            }
            .f2>.card>.p_price {
                color: #0aa1ed;
                font-weight: bold;
                margin: 6px;
            }
            .f2>.card>a {
                display: block;
                width: 100px;
                height:24px;
                background-color: #0aa1ed;
                margin: 0 auto;
                color: #fff;
                line-height: 24px;
                text-decoration: none;
            }
            /***** f2 卡片3 CSS *****/
            .f2>.card3 {
                margin-right: 0;
            }
        </style>

    </head>
    <body>
        <!-- 设置最外层的功能块 -->
        <div class="main">
            <!-- 版心 固定宽度且居中 -->
            <div class="center">
                <!-- 一楼 -->
                <div class="f1">
                    <!-- 一楼左侧 -->
                    <div class="left">
                        <div class="text">
                            <p class="p_title">灵越 燃7000系列</p>
                            <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p>
                            <p class="p_price">￥4999.00</p>
                            <a href="#">查看详情</a>
                        </div>
                        <img src="img/computer1.png">
                    </div>
                    <!-- 一楼右侧 -->
                    <div class="right">
                        <div class="text">
                            <p class="p_title">颜值 框不住</p>
                            <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p>
                            <p class="p_price">￥6888.00</p>
                            <a href="#">查看详情</a>
                        </div>
                        <img src="img/computer2.png">
                    </div>
                </div>
                <!-- 二楼 -->
                <div class="f2">
                    <!-- 二楼左侧 -->
                    <div class="left">
                        <div class="tit">
                            <div class="head">
                                <img src="img/icon.png">
                                <span>电脑,办公/1F</span>
                            </div>
                            <div class="item_all">
                                <p>电脑整机</p>
                                <ul>
                                    <li>笔记本</li>
                                    <li>游戏机</li>
                                    <li>台式机</li>
                                    <li>一体机</li>
                                    <li>服务器</li>
                                    <li>联想</li>
                                </ul>
                                <p>电脑配件</p>
                                <ul>
                                    <li>CPU</li>
                                    <li>SSD硬盘</li>
                                    <li>显示器</li>
                                    <li>显卡</li>
                                    <li>组装电脑</li>
                                    <li>机箱</li>
                                </ul>
                                <p>外设/游戏</p>
                                <ul>
                                    <li>键盘</li>
                                    <li>鼠标</li>
                                    <li>U盘</li>
                                    <li>移动硬盘</li>
                                    <li>游戏设备</li>
                                    <li>智能单车</li>
                                </ul>
                            </div>
                        </div>
                        <div></div>

                    </div>
                    <!-- 二楼卡片 -->
                    <div class="card">
                        <img src="img/computer3.png">
                        <div class="p_intro">戴尔(DELL)XPS13-9360-R1609 <br>13.3英寸微边框笔记本电脑</div>
                        <div class="p_price">￥4600.00</div>
                        <a href="#">查看详情</a>
                    </div>
                    <div class="card">
                        <img src="img/computer4.png" alt="">
                        <div class="p_intro">14.8mm超轻薄笔记本电脑 航海王版<br>13.3英寸微边框笔记本电脑</div>
                        <div class="p_price">￥5600.00</div>
                        <a href="#">查看详情</a>
                        <br>
                    </div>
                    <div class="card card3">
                        <img src="img/computer3.png">
                        <div class="p_intro">联想(Lenovo) YOGA900 多彩版 <br>13.3英寸微边框笔记本电脑</div>
                        <div class="p_price">￥6600.00</div>
                        <a href="#">查看详情</a>
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>